/**
 * 参考： https://www.cnblogs.com/kbnet/p/6938693.html
 * Vuex ={
    Store:function Store(){},
    mapActions:function(){},    // 对应Actions的结果集
    mapGetters:function(){},    //对应Getters的结果集
    mapMutations:function(){},  //对应Mutations的结果集
    mapState:function(){},      //对应State的结果集
    install:function install(){}, //暂时不做讲解
    installed:true //暂时不做讲解
}
//如果我们只需要里面的State时我们可以这样写
import { mapState } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理
const plugins ={} 插件就是一个钩子函数，在初始化store的时候引入即可。
 */
// 处理组件状态
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import api from '../api/index'
import utils from '@/utils/utils'
Vue.use(Vuex)

// 储存初始化数据
const state = {
  userInfo: {}, // 用户信息
  menus: [], // 用户所有菜单
  resources: [], // 用户所有资源
  menuTabs: [], // tab页数组
  activeTab: '0', // 当前激活的tab页id
  outsideDialog: {}, // 外部dialog弹窗
  insideDialog: {}, // 内部dialog弹窗
  menuExpand: true // 左侧菜单是否展开
}
// 对State 里面的数据二次处理,通过this.$store.getters.valueName对派生出来的状态进行访问
const getters = {
  // 打平的菜单，只有一个层级
  flatMenu (state) {
    return state.menus.length ? utils.flatObject(utils.simpleClone(state.menus)) : []
  }
}
// 对数据进行计算的方法全部写在里面(类似computed)在页面中触发时使用this.$store.commit('mutationName') 触发Mutations方法改变state的值
const mutations = {
  // 更新state的值
  update (state, data) {
    for (const [key, value] of Object.entries(data)) {
      state[key] = value
    }
  },
  // 更新用户信息
  updateUserInfo (state, data) {
    const { menus, resources, userInfo } = data
    state.menus = menus
    state.resources = resources
    state.userInfo = userInfo
  },
  // 增加tab页
  addTab (state, data) {
    state.menuTabs.push(data)
  },
  // 更新tab页
  replaceTab (state, { oldId, tab }) {
    const index = state.menuTabs.findIndex(mt => mt.id === oldId)
    state.menuTabs.splice(index, 1, tab)
    state.activeTab = tab.id
  },
  // 关闭tab页
  closeTab (state, id) {
    const index = state.menuTabs.findIndex(mt => mt.id === id)
    index >= 0 && state.menuTabs.splice(index, 1)
    if (id === state.activeTab) {
      // 切换到左边的tab
      store.commit('update', { activeTab: state.menuTabs[index - 1].id })
    }
  },
  // 批量关闭tab页
  closeTabs (state, command) {
    // 当前tab所在的索引
    const index = state.menuTabs.findIndex(mt => mt.id === state.activeTab)
    // 关闭左边tab的时候，移除从第2个标签页开始，到当前标签的前一个标签（首页不能移除）
    if (command === 'left') {
      state.menuTabs.splice(1, index - 1)
    } else if (command === 'right') {
      state.menuTabs.splice(index + 1)
    } else if (command === 'all') {
      state.menuTabs.splice(1)
      store.commit('update', { activeTab: '0' })
    } else if (command === 'noActive') {
      state.menuTabs.splice(1, index - 1)
      state.menuTabs.splice(2)
    }
  },

  // 更新Dialog弹窗
  updateDialog (state, dialog) {
    if (state.outsideDialog.visible) {
      state.insideDialog = dialog
    } else {
      state.outsideDialog = dialog
    }
  },
  // 关闭Dialog弹窗
  hideDialog (state) {
    if (state.insideDialog.visible) {
      state.insideDialog = {}
    } else {
      state.outsideDialog = {}
    }
  },
  // 登出
  logout (state) {
    localStorage.removeItem('token')
    state.menuTabs = [state.menuTabs[0]]
    state.activeTab = '0'
    localStorage.removeItem('vuex')
  }
}
// 处理Mutations中已经写好的方法 其直接触发方式是 this.$store.dispatch(actionName)
const actions = {
  login (context, params) {
    return api.system.login(params)
  },
  logout (context, params) {
    return api.system.logout(params)
  },
  // 获取用户信息， 菜单，资源
  getUserInfo (context, params) {
    return api.system.getUserInfo(params)
  }
}

export let store = {}
export function init ({ modules, cache = {} }) {
  const home = {
    id: '0',
    title: '首页',
    path: '/',
    noClose: true,
    component: 'os-home'
  }
  state.menuTabs.push(home)
  store = new Vuex.Store({
    strict: process.env.NODE_ENV !== 'production',
    state,
    getters,
    mutations,
    actions,
    modules,
    plugins: [createPersistedState({
      storage: window.localStorage,
      reducer: (state) => ({
        ...cache,
        menuTabs: state.menuTabs,
        activeTab: state.activeTab
      })
    })]
  })
  return store
}
